:root {
  // 这里可以设置你自定义的颜色变量
  // 这个是element主要按钮:active的颜色，当主题更改后此变量的值也随之更改
  --el-color-primary-dark: #0d84ff;
}
:export {
  --el-color-primary-dark: --el-color-primary-dark;
}

// 覆盖 element-plus 的样式
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.el-upload {
  input[type='file'] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}

// dropdown
.el-dropdown-menu {
  a {
    display: block;
  }
}

// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}

// 选中行背景色值
.el-table__body tr.current-row td {
  background-color: #e1f3d8b5 !important;
}

// card 的header统一高度
.el-card__header {
  height: 60px !important;
}

// 表格表头和表体未对齐
.el-table__header col[name='gutter'] {
  display: table-cell !important;
}

// * 设置 notification/message 层级在 loading 之上
.el-message,
.el-notification {
  z-index: 99999 !important;
}

// * 设置 el-alert 边框
.el-alert {
  border: 1px solid;
}

// * 当前页面最大化 css
.main-maximize {
  .aside-split,
  .el-aside,
  .el-header,
  .el-footer,
  .tabs-box {
    display: none !important;
  }
}

// * card 卡片样式
.card {
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
  background-color: var(--el-fill-color-blank);
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}

// * 不需要 card 卡片样式（在组件内使用 proTable 会使用到）
.no-card {
  .card {
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .table-search {
    padding: 18px 0 0 !important;
    margin-bottom: 0 !important;
  }
}

// * content-box (常用内容盒子)
.content-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  .text {
    margin: 20px 0 30px;
    font-size: 23px;
    font-weight: bold;
    color: var(--el-text-color-regular);
  }
  .el-descriptions {
    width: 100%;
    padding: 40px 0 0;
    .el-descriptions__title {
      font-size: 18px;
    }
    .el-descriptions__label {
      width: 200px;
    }
  }
}

// * main-box (树形表格 treeFilter 页面会使用，左右布局 flex)
.main-box {
  display: flex;
  width: 100%;
  height: 100%;
  .table-box {
    /* 这里减去的是 treeFilter 组件宽度 */
    width: calc(100% - 230px);
  }
}

// * table 表格页面样式
.table-box {
  // min-height: calc(100vh - 254px);
}
.table-box,
.table-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // min-height: calc(100vh - 254px);

  // table-search 表格搜索样式
  .table-search {
    padding: 18px 18px 0;
    margin-bottom: 10px;
    .el-form {
      .el-form-item__content > * {
        width: 100%;
      }

      // 去除时间选择器上下 padding
      .el-range-editor.el-input__wrapper {
        padding: 0 10px;
      }
      .el-select {
        width: 100%;
      }
    }
    .operation {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 18px;
    }
  }
  .el-table--border::before {
    width: 0px;
  }
  .el-table--border::after {
    width: 0px;
  }
  // 表格 header 样式
  .table-header {
    .header-button-lf {
      float: left;
    }
    .header-button-ri {
      float: right;
    }
    .el-button {
      margin-bottom: 15px;
    }
  }
  .el-table--border td:nth-child(2) {
    // border-left: 1px solid #ebeef5;
  }
  // el-table 表格样式
  .el-table {
    flex: 1;

    // 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
    table {
      width: 100%;
    }
    .el-table__header th {
      height: 45px;
      font-size: 15px;
      font-weight: bold;
      color: var(--el-text-color-primary);
      background: var(--el-fill-color-light);
    }
    .el-table__row {
      height: 45px;
      font-size: 14px;
    }

    // 设置 el-table 中 header 文字不换行，并省略
    .el-table__header .el-table__cell > .cell {
      white-space: nowrap;
    }

    // 解决表格数据为空时样式不居中问题(仅在element-plus中)
    // .el-table__empty-block {
    // 	position: absolute;
    // 	top: 50%;
    // 	left: 50%;
    // 	transform: translate(-50%, -50%);
    // 	.table-empty {
    // 		line-height: 30px;
    // 	}
    // }

    // table 中 image 图片样式
    .table-image {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }

  // 表格 pagination 样式
  .el-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}

// * el-table 组件大小切换样式
.el-table--small {
  .el-table__header th {
    height: 40px !important;
    font-size: 14px !important;
  }
  .el-table__row {
    height: 40px !important;
    font-size: 13px !important;
  }
}
.el-table--large {
  .el-table__header th {
    height: 50px !important;
    font-size: 16px !important;
  }
  .el-table__row {
    height: 50px !important;
    font-size: 15px !important;
  }
}

// * el-drawer 样式
.el-drawer {
  // .el-drawer__header {
  //   padding: 15px 20px 14px;
  //   margin-bottom: 0;
  //   border-bottom: 1px solid var(--el-border-color-lighter);
  //   span {
  //     font-size: 17px;
  //     color: var(--el-text-color-primary) !important;
  //   }
  // }
  .el-drawer__footer {
    border-top: 1px solid var(--el-border-color-lighter);
  }

  // drawer select 样式
  .el-select {
    width: 100%;
  }

  // drawer-form 中存在两列 form-item
  .drawer-multiColumn-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: 47%;
      &:nth-child(2n-1) {
        margin-right: 5%;
      }
    }
  }
}

// * el-dialog 样式
.el-dialog {
  padding: 24px !important;
  .el-dialog__header {
    padding: 15px 20px;
    margin: 0;
    border-bottom: none;
    .el-dialog__title {
      font-size: 17px;
    }
  }
  .el-form-item--default .el-form-item__label {
    // font-weight: 700;
  }
}

//输入框有限制长度的设置 padding-right 以免遮盖内容
.limit .el-input__inner,
.limit .el-textarea__inner {
  padding-right: 58px;
}
//el-form中
.el-form-item__content > * {
  width: 100%;
}
.el-form-item__content .el-radio {
  width: auto;
}
.ele-table-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  padding: 16px;
  box-sizing: border-box;
  // background-color: var(--component-background);
  z-index: 1400;
}
.el-tree-node__content {
  margin: 4px 0;
}
// 设置 el-table 中 解决操作列按钮加粗问题
.el-button {
  font-weight: 400 !important;
}
//解决类似系统配置左侧table的分野展示效果
@media (max-width: 1750px) {
  :deep(.el-pagination__jump) {
    display: none;
  }
}

/* 定义滚动条宽度和背景颜色 */
::-webkit-scrollbar {
  width: 0px;
  background-color: #f9f9f9;
}
// /* 定义滚动条滑块样式 */
// ::-webkit-scrollbar-thumb {
//   border-radius: 10px;
//   background-color: #9E9E9E;
// }

// /* 定义滚动条滑块hover样式 */
// ::-webkit-scrollbar-thumb:hover {
//   background-color: #727272;
// }
.select_popper{
  z-index: 5000!important;
}

.el-form {
  .el-row .el-col:last-child .plus-form-item{
    margin-bottom: 0px !important;
  }
}

.table-search {
  padding: 0 !important;
}
.el-table__header-wrapper{
  .el-table__cell{
    .cell,
    span{
      color: #909399 !important;
      font-weight: bold;
    }
  }
}
.uploadIcon-pop,
.icon-picker-popover{
  z-index: 5000!important;
}
.el-tab-pane{
  height: 100%;
  position: relative;
}